var banImg = document.querySelector('.ban-img')
var moveimg = banImg.querySelector('ul')
var right = document.querySelector('.right-p')
var left = document.querySelector('.left-p')
var center = document.querySelector('.center')
var ban = document.querySelector('.ban')
var circle = 0
var flag = true
let sum = 0
var b = 1
for (let i = 0; i < moveimg.children.length; i++) {
    let a = document.createElement('a')
    center.appendChild(a)
    a.href = 'javascript:;'
}
var clone = moveimg.children[0].cloneNode(true)
moveimg.appendChild(clone)
function movetime(obj, end, collback) {
    obj.time = setInterval(function () {
        var move = (end - obj.offsetLeft) / 10;
        if (obj.offsetLeft === end) {
            clearInterval(obj.time)
            collback && collback()
            // 类似于if（collback）{
            //          collback
            //       }
        }
        move > 0 ? obj.style.left = obj.offsetLeft + move + 1 + "px" : obj.style.left = obj.offsetLeft + move - 1 + "px"

    }, 10)
}
right.addEventListener('click', function () {
    if (circle === center.children.length - 1) {
        if (flag) {
            flag = false
            circle = 0
            movetime(moveimg, -center.children.length * 979, function () {
                flag = true
            })
            ban.style.backgroundImage = 'url("../image/background/' + 1 + '.jpg")'
            for (let i = 0; i < center.children.length; i++) {
                center.children[i].style.backgroundColor = "white"
            }
            center.children[0].style.backgroundColor = "red"
        }
    } else if (circle !== center.children.length - 1) {
        if (flag) {
            circle++
            if (circle === 1) {
                moveimg.style.left = '300px'
            }
            center.children[circle].click()
        }
    }
})
left.addEventListener('click', function () {
    if (circle === 0) {
        if (flag) {
            flag = false
            circle = 5
            moveimg.style.left = -(center.children.length * 979) + "px"
            movetime(moveimg, -(center.children.length - 1) * 979, function () {
                flag = true
            })
            ban.style.backgroundImage = 'url("../image/background/' + 6 + '.jpg")'
            for (let i = 0; i < center.children.length; i++) {
                center.children[i].style.backgroundColor = "white"
            }
            center.children[5].style.backgroundColor = "red"
        }

    } else if (circle !== 0) {
        if (flag) {
            circle--
            center.children[circle].click()
        }
    }
})
center.children[0].style.backgroundColor = 'red'
for (let i = 0; i < moveimg.children.length - 1; i++) {
    center.children[i].addEventListener('click', function () {
        if (flag) {
            flag = false
            circle = i
            for (let j = 0; j < center.children.length; j++) {
                center.children[j].style.backgroundColor = 'white'
            }
            movetime(moveimg, -i * 979, function () {
                flag = true
            })
            ban.style.backgroundImage = 'url("../image/background/' + (i + 1) + '.jpg")'
            center.children[i].style.backgroundColor = "red"
        }
    })
}
function autoply() {

        setInterval(function () {
            if (b === 1) {
                right.click()
            }
        }, 2000)

}
ban.addEventListener('mouseenter', function () {
    b = 0
})
ban.addEventListener('mouseleave', function () {
    b = 1
})
autoply()